<template>
	<view class="order-detail-container full-container">
		<template v-if="info">
			<view class="base-info flex flex-direction align-center" v-if="statusInfo">
				<view class="status">
					<view :style="{backgroundColor:statusInfo.color}">
						<uni-icons custom-prefix="iconfont" :type="statusInfo.icon" color="#fff" size="16"></uni-icons>
						<up-text :text="statusInfo.name" color="#fff" :size="14"></up-text>
					</view>
				</view>
				<view class="tip" v-if="type === 'purchase'">卖家已接单，请尽快付款</view>
				<template v-if="statusInfo.type == 1">
					<view class="time">
						截止付款时间：{{info.expireTime}}
					</view>
					<view>
						如超过截止付款时间，该订单可以申诉取消
					</view>
				</template>
			</view>

			<view class="order-info box">
				<uni-section title="订单信息" titleFontSize="28rpx" titleColor="#000" type="line">
					<uni-list :border="false">
						<uni-list-item :border="false" title="订单编号">
							<template v-slot:footer>
								<up-text :text="info.orderNo" color="#999" size="12"></up-text>
								<up-copy :content="info.orderNo">
									<uni-icons custom-prefix="iconfont" type="icon-copy" color="#333"
										size="18"></uni-icons>
								</up-copy>
							</template>
						</uni-list-item>
						<uni-list-item :border="false" title="下单时间" :rightText="info.createTime" />
						<uni-list-item :border="false" title="收款账号" :rightText="info.cashier" />
						<uni-list-item :border="false" title="支付方式" :rightText="info.paymentWay" />
						<uni-list-item v-if="type === 'shipping'" :border="false" title="买家"
							:rightText="info.purchaser?info.purchaser:'——'" />
						<uni-list-item v-if="info.sellerName && type === 'purchase'" :border="false" title="卖家"
							:rightText="info.sellerName" />
						<uni-list-item :border="false" title="购买金额" :rightText="`${originalAmount} 元`" />
					</uni-list>
				</uni-section>
			</view>

			<view class="order-info box">
				<uni-section title="商品信息" titleFontSize="28rpx" titleColor="#000" type="line">
					<geek-goods-item v-for="item in goodList" :item="item" showThumb :key="item.id"></geek-goods-item>
				</uni-section>
			</view>

			<view class="sell-info box" v-if="type === 'purchase'">
				<uni-section title="卖家收款信息" titleFontSize="28rpx" titleColor="#000" type="line">
					<uni-list :border="false">
						<uni-list-item :border="false" title="账号">
							<template v-slot:footer>
								<up-text :text="info.accountNum" color="#999" size="14"></up-text>
								<up-copy :content="info.accountNum">
									<uni-icons custom-prefix="iconfont" type="icon-copy" color="#333"
										size="18"></uni-icons>
								</up-copy>
							</template>
						</uni-list-item>
						<uni-list-item :border="false" title="姓名">
							<template v-slot:footer>
								<up-text :text="info.accountName" color="#999" size="14"></up-text>
								<up-copy :content="info.accountName">
									<uni-icons custom-prefix="iconfont" type="icon-copy" color="#333"
										size="18"></uni-icons>
								</up-copy>
							</template>
						</uni-list-item>
						<uni-list-item :border="false" title="机构" :rightText="info.accountType" />
					</uni-list>
				</uni-section>
			</view>

			<view class="pay-info box" v-if="showAppealBox">
				<uni-section title="申诉材料" titleFontSize="28rpx" titleColor="#000" type="line">
					<uni-forms ref="form" :modelValue="formData" :rules="rules" err-show-type="toast"
						label-position="top">
						<uni-forms-item :label="statusInfo.type == 8 ? '':'上传视频'" name="videoFile">
							<up-upload v-if="statusInfo.type == 1" accept='video' :fileList="videoFileList"
								@afterRead="afterRead($event,'videoFile')" @delete="deleteVideo"
								:capture="['album', 'camera']" :maxCount="1" :width="120"
								:disabled="statusInfo.type == 8" :deletable="statusInfo.type == 1"
								:maxSize="20 * 1024 * 1024" :previewFullImage="true"></up-upload>
							<video v-if="statusInfo.type == 8" :src="videoFileList[0].url"></video>
						</uni-forms-item>
						<uni-forms-item :label="statusInfo.type == 8 ? '':'上传图片'" name="imageFile">
							<up-upload :fileList="imageFileList" @afterRead="afterRead($event,'imageFile')"
								accept="image" :capture="['album', 'camera']" @delete="deletePic" :maxCount="1"
								:width="120" :disabled="statusInfo.type == 8" :deletable="statusInfo.type == 1"
								:maxSize="5 * 1024 * 1024" :previewFullImage="true"></up-upload>
						</uni-forms-item>
					</uni-forms>
				</uni-section>
			</view>

			<view class="pay-info box" v-if="showPayBox">
				<uni-section title="支付凭证" titleFontSize="28rpx" titleColor="#000" type="line">
					<uni-forms ref="form" :modelValue="formData" :rules="rules" err-show-type="toast"
						label-position="top">
						<uni-forms-item label="上传图片" name="imageFile">
							<up-upload :fileList="imageFileList" @afterRead="afterRead($event,'imageFile')"
								accept="image" :capture="['album', 'camera']" @delete="deletePic" :maxCount="1"
								:width="120" :disabled="statusInfo.type == 2" :deletable="statusInfo.type == 1"
								:maxSize="5 * 1024 * 1024" :previewFullImage="true"></up-upload>
						</uni-forms-item>
					</uni-forms>
				</uni-section>
			</view>

			<view class="actions flex justify-center" v-if="statusInfo.type == 1">
				<template v-if="type !== 'purchase'">
					<up-button @click="onConfirm" text="已完成付款" shape="circle" :hairline="true"
						color="linear-gradient(to right, rgb(60, 156, 255), rgb(41, 121, 255))"></up-button>
					<up-button text="未付款申诉" @click="onAppeal" shape="circle" :hairline="true" :plain="true"
						type="error"></up-button>
				</template>
				<template v-else>
					<up-button @click="onPay" text="已完成付款" shape="circle" :hairline="true"
						color="linear-gradient(to right, rgb(60, 156, 255), rgb(41, 121, 255))"></up-button>
				</template>
			</view>
		</template>
		<view class="nodata" v-else>
			<up-empty mode="data" icon="/static/images/empty/data.png" text="暂无数据"></up-empty>
		</view>
	</view>
</template>

<script>
	import _ from 'lodash'
	import {
		uploadFile
	} from '@/api/system/user'
	import {
		confirm,
		appeal,
		orderDetail
	} from '@/api/seller/order'

	export default {
		data() {
			return {
				info: null,
				videoFileList: [],
				imageFileList: [],
				// 表单数据
				formData: {
					videoFile: '',
					imageFile: ''
				},
				rules: {
					// 对videoFile字段进行必填验证
					videoFile: {
						rules: [{
							required: true,
							errorMessage: '请上传视频',
						}]
					},
					// 对imageFile字段进行必填验证
					imageFile: {
						rules: [{
							required: true,
							errorMessage: '请上传图片',
						}]
					}
				}
			}
		},

		computed: {
			id() {
				return this.$page?.options.id || ''
			},

			type() {
				return this.$page?.options.type || ''
			},

			goodList() {
				return _.get(this.info, 'goodList', []) || []
			},

			appealInfo() {
				const appealInfo = _.get(this.info, 'appealInfo', null) || null
				return appealInfo ? JSON.parse(appealInfo) : null
			},
			
			payInfo() {
				return _.get(this.info, 'payInfo', null) || null
			},

			showAppealBox() {
				return this.type !== 'purchase' && (this.statusInfo.type == 1 || (this.statusInfo.type == 8 && this
					.appealInfo))
			},
			
			showPayBox() {
				return this.type === 'purchase' && (this.statusInfo.type == 1 || (this.statusInfo.type == 2 && this
					.payInfo))
			},

			amount() {
				return (Number(_.get(this.info, 'amount', 0) || 0) / 100).toFixed(2)
			},

			originalAmount() {
				if (this.type === 'purchase') {
					return this.amount
				}
				return (Number(_.get(this.info, 'originalAmount', 0) || 0) / 100).toFixed(2)
			},

			countTime() {
				const time = new Date(this.info.expireTime).getTime() - new Date().getTime()
				return time > 0 ? time : 0
			},

			statusInfo() {
				const names = [{
						type: 0,
						name: '初始化',
						icon: 'icon-chushihua',
						color: '#f4f4f5'
					},
					{
						type: 1,
						name: '待支付',
						icon: 'icon-payingY',
						color: '#fa9e3d'
					},
					{
						type: 2,
						name: '已支付',
						icon: 'icon-yizhifu',
						color: '#5ac725'
					},
					{
						type: 3,
						name: '支付失败',
						icon: 'icon-zfsb',
						color: '#e45656'
					},
					{
						type: 8,
						name: '申诉中',
						icon: 'icon-shensuzhong',
						color: '#f1a532'
					},
					{
						type: 9,
						name: '取消支付',
						icon: 'icon-quxiaozhifu',
						color: '#606266'
					}
				]
				return _.find(names, {
					type: this.info?.status
				}) || null
			}
		},

		watch: {
			id() {
				this.fetchDetail()
			}
		},

		mounted() {
			this.fetchDetail()
		},

		methods: {
			fetchDetail() {
				if (this.id) {
					const Methods = this.type === 'shipping' ? orderDetail : null
					if (Methods) {
						Methods(this.id).then(({
							data
						}) => {
							this.info = data || null
							
							if(this.appealInfo){
								// 表单数据
								this.formData.videoFile = this.appealInfo?.videoUrl || ''
								this.formData.imageFile = this.appealInfo?.imageUrl || ''
								this.videoFileList = [{
									url:this.formData.videoFile
								}]
								this.imageFileList = [{
									url:this.formData.imageFile
								}]
							}
						})
					} else {
						uni.showToast({
							title: '系统开发中...',
							icon: 'none'
						})
					}
				}
			},

			onConfirm() {
				const self = this
				self.$store.commit('SET_UPDATE_LIST')
				uni.showModal({
					title: '温馨提示',
					content: '您将操作确认收款，是否确认？',
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							confirm(self.id).then(() => {
								self.$modal.msgSuccess('确认收款成功')
								const args = {
									...self.info,
									status: 2
								}
								self.$store.commit('SET_UPDATE_LIST', args)
								self.fetchDetail()
							})
						}
					}
				})
			},

			/****************申诉流程****************/
			deletePic(event) {
				this.imageFileList.splice(event.index, 1);
			},

			deleteVideo(event) {
				this.videoFileList.splice(event.index, 1);
			},

			// 新增图片
			async afterRead(event, key) {
				this[`${key}List`] = [{
					...event.file,
					status: 'uploading',
					message: '上传中',
				}]

				const {
					data
				} = await uploadFile({
					name: 'file',
					filePath: event.file.url
				});

				this[`${key}List`] = [{
					...data,
					status: 'success',
					message: ''
				}]

				this.formData[key] = data?.url || ''
			},

			// 申诉
			onAppeal() {
				const self = this
				self.$store.commit('SET_UPDATE_LIST')
				this.$refs.form.validate().then(res => {
					appeal(self.id, self.formData).then(() => {
						self.$modal.msgSuccess('申诉提交成功')
						const args = {
							...self.info,
							status: 8
						}
						self.$store.commit('SET_UPDATE_LIST', args)
						self.fetchDetail()
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},

			// 支付
			onPay() {
				const self = this
				self.$store.commit('SET_UPDATE_LIST')
				self.$refs.form.validate().then(res => {
					appeal(self.id, self.formData).then(() => {
						self.$modal.msgSuccess('已完成付款')
						const args = {
							...self.info,
							status: 2
						}
						self.$store.commit('SET_UPDATE_LIST', args)
						self.fetchDetail()
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-detail-container {
		padding-bottom: 140rpx;
		box-sizing: border-box;
		.base-info {
			padding: 40rpx 20rpx 100rpx;
			background-color: #3c9cff;
			color: #fff;

			.status {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;

				&>view {
					display: flex;
					background-color: rgba(#fff, .35);
					border-radius: 10rpx;
					padding: 10rpx 15rpx;
				}

				.uni-icons {
					margin-right: 18rpx;
				}

				text {
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			&>view {
				font-size: 26rpx;
				line-height: 40rpx;
			}
		}

		.box {
			border-radius: 16rpx;
			overflow: hidden;
			background-color: #fff;
			margin: 30rpx;

			&+.box {
				margin-top: 5rpx;
			}
		}

		.order-info {
			margin-top: -50rpx;
		}

		.order-info {
			&::v-deep {
				.geek-goods-item {
					&:first-child {
						padding-top: 0;
					}
				}
			}
		}

		&::v-deep {

			.uni-section {
				padding: 5rpx 20rpx 24rpx;

				.uni-section__content-title {
					font-weight: 600;
				}
			}

			.uni-list-item__container {
				padding: 6rpx 24rpx;

				.uni-list-item__content-title {
					color: #999;
					font-size: 26rpx;
				}

				.u-text__value,
				.uni-list-item__extra-text {
					font-size: 28rpx !important;
					color: #333 !important;
				}

				.uni-list-item__content {
					width: 136rpx !important;
					flex: none !important;
					text-align-last: justify;
					margin-right: 10rpx;
				}

				.uni-list-item__extra {
					flex: 1;
					overflow: hidden;
					justify-content: flex-start;
				}
			}
		}

		&::v-deep {
			.uni-forms {
				padding-bottom: 20rpx;

				uni-form {
					&>span {
						display: flex;
						align-items: center;
					}

					.uni-forms-item__label {
						font-size: 28rpx;
						height: 60rpx;
						padding: 0rpx;
						padding-bottom: 10rpx;
						justify-content: center !important;
						
						&.no-label{
							height: 30rpx !important;
						}
					}

					.u-upload__button,.u-upload__wrap__preview {
						margin: 0;
					}
					
					.u-upload__wrap__preview,video{
						width: 120px;
						height: 80px;
						background-color: #f8f8f9 !important;
					}
					
					.u-upload__wrap__preview__other{
						background-color: #f8f8f9 !important;
					}
				}

				.uni-forms-item {
					margin-bottom: 0;
					flex: 1;
					overflow: hidden;
					display: flex;
					align-items: center;
				}
			}
		}

		.actions {
			padding: 30rpx;
			position: fixed;
			width: 100%;
			bottom: 0;
			left: 0;
			background-color: #fff;
			border-top: 1px solid #f2f2f2;

			&::v-deep {
				.u-button {
					&+.u-button {
						margin-left: 30rpx;
					}
				}
			}
		}

		.nodata {
			height: 50vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	}
</style>